<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>extjs 表格</title>
    <link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javaScript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javaScript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script>
    Ext.onReady(function(){
        //创建复选框对象。singleSelect=true表示当前的复选框只能作为单选按钮来使用。
        var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true});
        //定义表格的列标题
        var cm = new Ext.grid.ColumnModel([
            //new Ext.grid.RowNumberer(),   显示行号
            sm,
            {header:"编号",dataIndex:"id"},
            {header:"名称",dataIndex:"name"},
            {header:"描述",dataIndex:"description"}
        ]);
        //对表格填充数据
        var data = [
            ["1","111111111","11111111111"],
            ["2","222222222 ","222222222"],
            ["3","333333","33333333333"],
            ["4","44444444","4444444444"],
            ["5","5555555555","555555555555"]
        ];
        //定义数据源
        var ds = new Ext.data.Store({
            proxy:new Ext.data.MemoryProxy(data),
            reader:new Ext.data.ArrayReader({},[
                {name:"id"},
                {name:"name"},
                {name:"description"}
            ])

        });
        ds.load();

        var grid = new Ext.grid.GridPanel({
            //enableColumnMove: false, //禁止拖放列
            //enableColumnResize: false,  //禁止改变列的宽度
            stripeRows: true,  //斑马线效果
            //loadMask: true,  //读取数据时的遮罩和提示功能
            renderTo:Ext.getBody(),
            ds:ds,
            cm:cm,
            sm:sm,
            width:300,
            autoHeight:true,
            //height:80,

            //初始化一些字段名称后的参数。。。
            viewConfig: {
                columnsText: '隐藏/显示列',  //设置下拉菜单提示文字
                scrollOffset: 15,    //设置右侧滚动条的预留宽度
                sortAscText: '升序',    //设置下拉菜单提示文字
                sortDescText: '降序',   //设置下拉菜单提示文字
                forceFit: true   //自动延展每列的长度
            }
        });
    });
</script>
</body>
</html>